<template>
    <div class="project-view">
        <div class="title-box">
            <p class="title">项目列表</p>
            <n-icon class="add-project" size="20" color="#0e7a0d" @click="addProjet">
                <game-controller />
            </n-icon>
        </div>
        <n-divider />
        <div class="container">
            <n-grid x-gap="12" :y-gap="8" :cols="4">
                <n-gi v-for="project in projects" class="project-item">
                    {{ project.name }}
                    <div class="hover-show">
                        <div class="btn-box">
                            <div @click="goTODetail(project)">进入</div>
                            <div @click="editProjet(project)">编辑</div>
                        </div>
                    </div>
                </n-gi>
            </n-grid>
        </div>
        <n-pagination
            v-if="pageCount > 1"
            v-model:page="page"
            class="pagination"
            :page-count="pageCount"
            :onUpdate:page="getAllProject"
        />
    </div>
    <n-modal v-model:show="showModal" :mask-closable="false">
        <div class="modal-box">
            <p class="title">{{ formDataModel.id ? "编辑项目" : "创建项目" }}</p>
            <n-form ref="formDataRef" :model="formDataModel" :rules="formDataRules">
                <n-form-item path="name" label="项目名称">
                    <n-input v-model:value="formDataModel.name" @keydown.enter.prevent />
                </n-form-item>
                <n-form-item path="path" label="路由地址">
                    <n-input v-model:value="formDataModel.path" @keydown.enter.prevent />
                </n-form-item>
                <div class="btn-box">
                    <n-button class="btn" @click="showModal = false">取消</n-button>
                    <n-button class="btn" type="primary" @click="sendProject">确定</n-button>
                </div>
            </n-form>
        </div>
    </n-modal>
</template>

<script>
import { GameController } from "@vicons/ionicons5";
import { Urls } from "../../utils/Urls";
import { localStorageUtil } from "../../utils/LocalStorageUtil";

export default {
    components: { GameController },
    data() {
        return {
            showModal: false,
            projects: [],
            page: 1,
            pageCount: 0,
            limit: 16,
            formDataModel: {
                name: "",
                path: "",
                id: "",
            },
            formDataRules: {
                name: [
                    {
                        required: true,
                        message: "请输入项目名称",
                    },
                ],
                path: [
                    {
                        required: true,
                        validator(rule, value) {
                            if (!value) {
                                return new Error("请输入地址");
                            }
                            if (!value.startsWith("/")) {
                                return new Error("地址必须以“/”开头");
                            }
                            if (new RegExp("[\\u4E00-\\u9FFF]+", "g").test(value)) {
                                return new Error("地址中含有中文");
                            }
                            return true;
                        },
                        trigger: ["input", "blur"],
                    },
                ],
            },
        };
    },
    mounted() {
        this.getAllProject();
    },
    methods: {
        goTODetail(project) {
            localStorageUtil.projectInfo = project;
            this.$router.push({
                path: "/",
            });
        },
        addProjet() {
            this.formDataModel.id = "";
            this.formDataModel.name = "";
            this.formDataModel.path = "";
            this.showModal = true;
        },
        editProjet(project) {
            this.formDataModel = JSON.parse(JSON.stringify(project));
            this.showModal = true;
        },
        sendProject(e) {
            e.preventDefault();
            this.$refs.formDataRef.validate(async errors => {
                if (errors) {
                    return;
                }
                if (this.formDataModel.id) {
                    await window.$http.post(Urls.updateProject, this.formDataModel);
                } else {
                    await window.$http.post(Urls.addProject, this.formDataModel);
                }
                await this.getAllProject();
                this.showModal = false;
            });
        },
        async getAllProject() {
            const { data } = await window.$http.get(Urls.getAllProject, {
                params: {
                    page: this.page,
                    limit: this.limit,
                },
            });
            this.pageCount = Math.ceil(data.count / this.limit);
            this.projects = data.list;
        },
    },
};
</script>

<style scoped lang="scss">
.project-view {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .title-box {
        display: flex;
        padding: 20px 0 0 30px;

        .title {
            font-size: 20px;
        }

        .add-project {
            margin-left: 10px;
            cursor: pointer;
        }
    }

    .container {
        flex: 1;
        padding: 0 30px;

        .project-item {
            position: relative;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 190px;
            height: 190px;
            border-radius: 5px;
            background-color: rgba(0, 128, 0, 0.12);

            .hover-show {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;
                width: 100%;
                height: 100%;
                border-radius: 5px;
                line-height: 1em;
                background-color: rgba(0, 0, 0, 0.7);

                .btn-box {
                    color: #fff;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: flex;
                    justify-content: center;

                    div {
                        cursor: pointer;
                        padding: 10px 15px;
                        border-radius: 5px;
                        border: 1px solid #fff;
                        margin-left: 10px;

                        &:hover {
                            background-color: #0e7a0d;
                        }
                    }
                }
            }

            &:hover {
                .hover-show {
                    display: block;
                }
            }
        }
    }

    .pagination {
        justify-content: center;
        padding-bottom: 20px;
    }
}

.modal-box {
    width: 300px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8);

    .title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }

    .btn-box {
        display: flex;
        justify-content: flex-end;

        .btn {
            margin-left: 10px;
        }
    }
}
</style>
